<template>
  <div id="container"></div>
</template>

<script>
import { Graph } from "@antv/x6";
export default {
  data() {
    return {};
  },
  mounted() {
    this.getChart();
  },
  methods: {
    getChart() {
      const data = {
        // 节点
        nodes: [
          {
            id: "node1", // String，可选，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 60, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "hello\n礼拜", // String，节点标签
            shape: "ellipse", // 使用 ellipse 渲染
            attrs: {
              body: {
                fill: "#2ECC71",
                stroke: "#000",
                strokeDasharray: "10,2",
              },
              label: {
                text: "Hello",
                fill: "#333",
                fontSize: 13,
              },
            },
          },
          {
            id: "node2", // String，节点的唯一标识
            x: 180, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 60, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "world", // String，节点标签
          },
          {
            id: "node3", // String，节点的唯一标识
            x: 300, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 60, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "world", // String，节点标签
          },
          {
            id: "node4", // String，节点的唯一标识
            x: 420, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 60, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "world", // String，节点标签
          },
          {
            id: "node5", // String，节点的唯一标识
            x: 540, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 60, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "world", // String，节点标签
          },
          {
            id: "node6", // String，节点的唯一标识
            x: 660, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 60, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "world", // String，节点标签
          },
          {
            id: "node7", // String，节点的唯一标识
            x: 780, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 60, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "world", // String，节点标签
          },
          {
            id: "node8", // String，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 100, // Number，必选，节点位置的 y 值
            width: 60, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "world", // String，节点标签
          },
          {
            id: "node9", // String，节点的唯一标识
            x: 300, // Number，必选，节点位置的 x 值
            y: 200, // Number，必选，节点位置的 y 值
            width: 60, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "world", // String，节点标签
          },
        ],
        // 边
        edges: [
          {
            source: "node1", // String，必须，起始节点 id
            target: "node2", // String，必须，目标节点 id
            // shape: 'double-edge',
          },
          {
            source: "node2", // String，必须，起始节点 id
            target: "node3", // String，必须，目标节点 id
            // shape: 'double-edge',
          },
          {
            source: "node3", // String，必须，起始节点 id
            target: "node4", // String，必须，目标节点 id
            // shape: 'double-edge',
          },
          {
            source: "node4", // String，必须，起始节点 id
            target: "node5", // String，必须，目标节点 id
            // shape: 'double-edge',
          },
          {
            source: "node5", // String，必须，起始节点 id
            target: "node6", // String，必须，目标节点 id
          },
          {
            source: "node6", // String，必须，起始节点 id
            target: "node7", // String，必须，目标节点 id
            // shape: 'double-edge',
          },
          {
            source: "node7", // String，必须，起始节点 id
            target: "node8", // String，必须，目标节点 id
            // shape: 'double-edge',
          },
          {
            source: "node3", // String，必须，起始节点 id
            target: "node9", // String，必须，目标节点 id
            // shape: 'double-edge',
          },
        ],
      };
      const width = container.scrollWidth;
      const height = (container.scrollHeight || 500) - 20;
      const graph = new Graph({
        container: document.getElementById("container"),
        width,
        height,
        panning: true, //画布平移
        interacting: {
          nodeMovable: false, //禁止节点移动
        },
        // background: {
        //   color: "#fffbe6", // 设置画布背景颜色
        // },
        // grid: {
        //   size: 10, // 网格大小 10px
        //   visible: true, // 渲染网格背景
        // },
      });
      graph.fromJSON(data);
      graph.centerContent(); //画布居中
    },
  },
};
</script>

<style>
</style>